<template>
  <div>
    <el-dialog
      :visible="value"
      :title="{ add: '新增', edit: '编辑' }[meta]"
      center
      @close="cancelEvent"
    >
      <!--
      接收index传过来status的值
      dialog进行判断 如果status的值为1
      form表单的disable的值为true
      否则form表单的disable的值为false

     -->

      <el-form :model="form" label-width="85px" :rules="rules" ref="form">
        <el-form-item label="学科编号" prop="rid">
          <el-input v-model="form.rid"></el-input>
        </el-form-item>
        <el-form-item label="学科名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="学科简称" prop="short_name">
          <el-input v-model="form.short_name"></el-input>
        </el-form-item>
        <el-form-item label="学科简介" prop="intro">
          <el-input v-model="form.intro"></el-input>
        </el-form-item>
        <el-form-item label="学科备注" prop="remark">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="footer">
          <el-button @click="cancelEvent">取消</el-button>
          <el-button type="primary" @click="addEvent">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { subjectAdd, subjectEdit } from '@/api/studylist'

export default {
  props: ['value'],

  data () {
    return {
      meta: 'add',
      form: {
        rid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: '',
        status: ''
      },

      rules: {
        rid: [
          { required: true, message: '请输入新增书籍编号', trigger: 'change' },
          { mix: 1, max: 6, message: '请输入1-6位书籍编号', trigger: 'change' }
        ],
        name: [{ required: true, message: '新增书籍名字', trigger: 'change' }],
        short_name: [
          { required: false, message: '新增书籍简称', trigger: 'change' }
        ],
        intro: [
          { required: false, message: '添加书籍简介', trigger: 'change' }
        ],
        remark: [{ required: false, message: '学科备注', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 表单状态识别
    identify () {
      if (this.form.status === 1) {
        this.$refs.form.disabled = false
      } else {
        this.$refs.form.disabled = true
      }
    },
    // 取消按钮
    cancelEvent () {
      this.$emit('input', false)
      this.$refs.form.resetFields()
      this.form = {
        rid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: ''
      }
    },
    // 添加学科以及编辑学科
    addEvent () {
      this.$refs.form.validate(async (result) => {
        if (result) {
          if (this.meta === 'add') {
            const res = await subjectAdd(this.form)
            console.log(res)
            this.$message.success('新增学科成功')
          } else if (this.meta === 'edit') {
            const res = await subjectEdit(this.form)
            console.log('编辑', res)
            this.$message.success('编辑学科成功')
          }

          this.$emit('getData')
          this.cancelEvent()
        }
      })
    }
  }
}
</script>

<style lang="less">
.el-dialog__header {
  background-image: linear-gradient(to right, #02c3fa, #0da2fa);
}
</style>
